<script setup lang="ts">
import { getUnityRoleById } from '@/theme/unityRole.theme'
import { type CSSProperties, ref } from 'vue'
import { type AudioParams, useUnityRoleStore } from '@/stores/unityRole'

const { unityRoleId } = defineProps<{
  unityRoleId: string
}>()
const role = getUnityRoleById(unityRoleId)
const iframeRef = ref<HTMLIFrameElement>()
// 使用Unity角色存储模块
const useUnityRole = useUnityRoleStore()

export interface IframeMethods {
  SendAudioUrl(param: AudioParams): void

  LoadFinish(func: () => void): void
}

let iframeMethods = {
  SendAudioUrl(param: AudioParams) {
    console.log(param)
  },
  LoadFinish(func: () => void) {
    func()
  }
}
/**
 * 发送音频的函数
 * @param param 包含音频参数的对象，其中必须包含音频的URL
 * @returns void 该函数没有返回值
 */
const sendAudio = (param: AudioParams): void => {
  // 从iframe引用中获取方法
  const { SendAudioUrl } = iframeMethods
  // 调用获取到的方法，并传入音频的URL
  SendAudioUrl({
    audioUrl: param.audioUrl
  })
}
const loadFinish = () => {
  useUnityRole.setIsUnityRoleLoadFinish(true)
}
const onIframeLoaded = () => {
  iframeMethods = iframeRef.value?.contentWindow as unknown as IframeMethods
  iframeMethods.LoadFinish(loadFinish)
  // 设置Unity角色的通话功能
  useUnityRole.setUnityRoleTalk(sendAudio)
  const talk = useUnityRole.getUnityRoleTalk
  talk({ audioUrl: 'https://www.bilibili.com/audio/au10000103' })
}

const railStyle = ({ focused, checked }: { focused: boolean; checked: boolean }) => {
  const style: CSSProperties = {}
  if (checked) {
    style.background = '#FF9C00'
    if (focused) {
      style.boxShadow = '0 0 0 2px #d0305040'
    }
  } else {
    style.background = '#2080f0'
    if (focused) {
      style.boxShadow = '0 0 0 2px #2080f040'
    }
  }
  return style
}
const handleChange = (value: boolean) => {
  useUnityRole.setIsUnityRoleTalk(value)
}
</script>

<template>
  <header
    class="absolute flex items-center justify-center h-20 w-1/2 top-0 left-1/2 -translate-x-1/2 text-white text-3xl"
    v-show="useUnityRole.getIsUnityRoleLoadFinish"
  >
    <img class="absolute left-0 right-0 w-full" src="@/assets/image/矩形%202@2x.png" alt="" />
    <img class="h-1/2 mr-5" src="@/assets/image/LOGO@2x.png" alt="" />
    <div>全国大学生商务谈判大赛咨询平台</div>
  </header>
  <iframe
    ref="iframeRef"
    class="w-full h-full"
    :src="role?.unity"
    allowfullscreen
    @load="onIframeLoaded"
  >
  </iframe>
  <n-switch
    class="absolute bottom-[10%] left-[29%]"
    size="medium"
    :rail-style="railStyle"
    :value="useUnityRole.getIsUnityRoleTalk"
    @update:value="handleChange"
    v-show="useUnityRole.getIsUnityRoleLoadFinish"
  >
    <template #checked> 开启角色语音 </template>
    <template #unchecked> 关闭角色语音 </template>
  </n-switch>
  <div
    v-show="useUnityRole.getIsUnityRoleLoadFinish"
    class="flex justify-evenly w-64 absolute top-2/3 left-60 text-white"
  >
    <!--introduced-->
    <div class="whitespace-pre-wrap text-sm">{{ role.introduced }}</div>
    <div class="text-3xl font-bold">{{ role.chineseName }}</div>
  </div>
  <footer
    v-show="useUnityRole.getIsUnityRoleLoadFinish"
    class="absolute bottom-16 left-36 text-white text-sm opacity-50"
  >
    © 江西科骏实业有限公司 有道商创（深圳）科技有限公司
  </footer>
</template>

<style scoped></style>
